<template>
  <div class="login-box">
    <p class="head">URP高校毕业论文管系统</p>

    <div class="nav">
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol" class="formdata">
        <a-form-item v-bind="validateInfos.name">
          <a-input v-model:value="modelRef.name" placeholder="学号或者工号" />
        </a-form-item>
        <a-form-item v-bind="validateInfos.password">
          <a-input
            v-model:value="modelRef.password"
            placeholder="6-16位密码,区分大小写"
          />
        </a-form-item>
        <a-form-item v-bind="validateInfos.newpassword">
          <a-input
            v-model:value="modelRef.newpassword"
            placeholder="确认密码"
          />
        </a-form-item>

        <a-form-item v-bind="validateInfos.email">
          <a-row>
            <a-col :span="18">
              <a-input
                v-model:value="modelRef.email"
                placeholder="请输入绑定邮箱"
              />
            </a-col>
            <a-col :span="6">
              <a-button>发送邮件</a-button>
            </a-col>
          </a-row>
        </a-form-item>

        <a-form-item v-bind="validateInfos.activation">
          <a-input
            v-model:value="modelRef.activation"
            placeholder="输入激活码"
          />
        </a-form-item>

        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click.prevent="onSubmit">确认</a-button>
          <!-- <a-button style="margin-left: 10px" @click="reset">Reset</a-button> -->
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { defineComponent, reactive, toRaw } from "vue";
import { Form } from "ant-design-vue";
const router = useRouter();
const useForm = Form.useForm;
const modelRef = reactive({
  name: "",
  password: "",
  newpassword: "",
  email: "",
  activation: "",
});
const { resetFields, validate, validateInfos } = useForm(
  modelRef,
  reactive({
    // name: [
    //   {
    //     required: true,
    //     message: "Please input name",
    //   },
    // ],
  })
);
const onSubmit = () => {
  validate()
    .then((res) => {
      console.log(res, toRaw(modelRef));
    })
    .catch((err) => {
      console.log("error", err);
    });
  router.replace("/success");
};
const reset = () => {
  resetFields();
};
</script>

<style lang="scss" scoped>
.login-box {
  width: 100%;
  height: 100%;
  /* background-color: red; */
  background: url("../../../public/bg.png");
  overflow: hidden;
  .head {
    color: #242425;
    font-size: 33px;
    font-weight: bold;
    text-align: center;
    margin-top: 150px;
  }
  .nav{
    margin-top: 50px;
  }
  .formdata {
    width: 380px;
    margin: 0 auto;
  }
}
</style>
